<template>
    <div>
        <el-form :inline="true" class="demo-form-inline" v-model="searchForm">
            <el-form-item>
                    <el-date-picker type="date" placeholder="期望维修日期" v-model="searchForm.date" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-input
                        v-model="searchForm.floor"
                        placeholder="楼号"
                        clearable
                ></el-input>

            </el-form-item>
            <el-form-item>
                <el-input
                        v-model="searchForm.address"
                        placeholder="宿舍号"
                        clearable
                ></el-input>

            </el-form-item>
            <el-form-item>
                <el-input
                        v-model="searchForm.phone"
                        placeholder="手机号"
                        clearable
                ></el-input>

            </el-form-item>
            <el-form-item>
                <template>
                    <el-select v-model="status" clearable placeholder="维修进度">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>

            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" icon="el-icon-search"
                >查找</el-button
                >
            </el-form-item>
            <!-- <el-form-item>
              <el-button
                type="primary"
                @click="addDialogVisible = true"
                icon="el-icon-circle-plus-outline"
                >新增</el-button
              >
            </el-form-item> -->

            <el-form-item>


                <el-button type="info" @click="downloadExcel" icon="el-icon-download"
                >导出Excel</el-button
                >

            </el-form-item>
        </el-form>
    <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName">
        <el-table-column
                prop="date"
                label="期望维修日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="报修名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="floor"
                label="楼号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址"
                width="180">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="手机号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="desc"
                label="故障详情"
                width="180"
        >
        </el-table-column>
        <el-table-column prop="status" label="维修进度" >
            <template v-slot="slotProps">
                <el-select
                        v-model="slotProps.row.status"
                        placeholder="请选择"
                        @change="changeSelect(slotProps.row.id,slotProps.row.status)"
                >
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>

        </el-table-column>
        <el-table-column
                prop="value"
                label="维修评分"
               >
        </el-table-column>
    </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.CurrentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="page.Size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.Total"
        >
        </el-pagination>

        <!-- <el-dialog
          title="分配权限"
          :visible.sync="disDialogVisible"
          width="30%"

        >
        <el-form :model="TreeData">
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          ref="AuthTree"
          default-expand-all
          check-strictly
          :props="defaultProps">
        </el-tree>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="disDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="putData">确 定</el-button>
        </span>
        </el-dialog> -->
    </div>
</template>

<style>
    .el-table .warning-row {
        background: ivory;
        font-weight: bold;
        color: #ff7d34;
    }

    .el-table .success-row {
        background: mintcream;
        font-weight: bold;
        color: #7700ff;
    }
    .el-table .info-row {
        font-weight: bold;
    }
    .el-table{
        color: black;
    }
    .el-pagination {
        float: right;
    }
    .el-form {
        padding-right: 40px;
    }
    .el-button{
        margin-right: 7px;
        margin-left: 10px;
    }
</style>

<script>
    import { request } from "@/axios/request"
    export default {
        created(){
            this.getAll()
        },
        methods: {

            changeSelect(id,status){
                console.log(id)
                console.log(status)
                request({
                    url:'/malfunctionAll/'+id+'/'+status,
                    method:'put',

                }).then(res=>{
                    //this.gettableData()
                    this.$message({
                        message:res.data.msg,
                        type:'success'
                    })
                })
            },

            search(){
              this.getAll();
            },
            getAll(){
                request({
                    url: "/malfunctionAll",
                    method: "get",
                    params:{
                        date:this.searchForm.date,
                        floor:this.searchForm.floor,
                        address:this.searchForm.address,
                        phone:this.searchForm.phone,
                        status: this.status,
                        currentPage:this.page.CurrentPage,
                        size:this.page.Size,

                    }
                }).then(res => {
                    if(res.data.object.data==null){
                        this.tableData = []
                        this.page.Total=res.data.object.TotalCount;
                    }else{
                        this.tableData = res.data.object.data
                        this.page.Total=res.data.object.TotalCount;
                    }

                });
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex %3 ==1) {
                    return 'success-row';
                }else if (rowIndex %3 == 2){
                    return 'info-row';
                }
                    return 'warning-row';


            }
        },
        data() {
            return {
                tableData: [{
                    id:1,
                    date: '2016-05-02',
                    name: '王小虎',
                    floor:"9",
                    address: '9110',
                    phone:"12345",
                    desc:"ddddddd",
                    status:"",
                    value:5
                }, {
                    id:2,
                    date: '2016-05-02',
                    name: '王小虎',
                    floor:"9",
                    address: '9110',
                    phone:"12345",
                    desc:"ddddddd",
                    status:"",
                    value:5
                }, {
                    id:3,
                    date: '2016-05-02',
                    name: '王小虎',
                    floor:"9",
                    address: '9110',
                    phone:"12345",
                    desc:"ddddddd"
                    ,
                    status:"",
                    value:5
                }, {
                    id:4,
                    date: '2016-05-02',
                    name: '王小虎',
                    floor:"9",
                    address: '9110',
                    phone:"12345",
                    desc:"ddddddd"
                    ,
                    status:"",
                    value:5
                }],
                //applyDisabled:true,
                applyDate:["2020-02-01 19:00:00", "2020-02-01 20:00:00"],
                addForm: {
                    // id:null,
                    // name: "",
                    // code: "",
                    // remark:"",
                    // statu: "",
                },
                options: [
                    {
                        value: 1,
                        label: '报修成功'
                    }, {
                        value: 2,
                        label: '开始维修'
                    }, {
                        value: 3,
                        label: '维修完成'
                    }],

                areaForm:{
                    country:null,
                    province:null,
                    city:null,
                    district:null
                },
                status: null,
                editvalue:null,
                data: [],
                loading:false,
                TreeData:{},
                currentRoleId:null,
                addDialogVisible: false,
                //disDialogVisible:false,
                searchForm: {
                    Name: '',
                    Id:null,
                    address:"",
                    floor:"",
                    phone:"",
                    date:null
                },

                page: {
                    Size: 10,
                    CurrentPage: 1,
                    Total: null
                },
                selectIds:[],
                delButSta: true,

                rules: {
                    name: [
                        { required: true, message: "请输入角色名称", trigger: "blur" },
                        { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
                    ],
                    code: [
                        { required: true, message: "请输入唯一状态码", trigger: "blur" },
                    ],
                    statu: [{ required: true, message: "请输入状态", trigger: "blur" }],
                },
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
            };
        }
    }
</script>
